<template>
  <div class="list-page">
    <tool-bar nav="" title="数据连接">
      <el-button @click="add_click()">添加</el-button>
    </tool-bar>
    <my-list
        ref="list"
        url="/dev/db-connection/list"
        @param="preload"
        @loaded="procData"
        :page-size="10"
        :store="true"
    >


      <el-table-column label="名称" align="center">
        <template v-slot="scope">
          <div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数据类型" prop="type_res" width="100"></el-table-column>
      <el-table-column align="center" label="Ip:port">
        <template v-slot="scope">
          <el-tag>{{ scope.row.host }}</el-tag>
          <label>:{{ scope.row.port }}</label>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数据库" prop="dbName"></el-table-column>
      <el-table-column align="center" label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button @click="db_click(scope.row)" size="small" round
                    >
            数据库表
          </el-button>

          <el-button round size="small" @click="$data.table1=scope.row.id" v-if="!$data.table1">参考库
          </el-button>
          <el-button round size="small" @click="$data.table1 = ''" type="primary" v-else-if="$data.table1 && $data.table1 == scope.row.id ">参考库
          </el-button>
          <el-button round size="small" @click="diff_click(scope.row.id)" type="danger" v-else>对比库
          </el-button>

        </template>
      </el-table-column>
      <el-table-column label="" align="center" width="80">
        <template v-slot="scope">
          <el-button type="warning" plain round @click="delete_click(scope.row)" size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #query="scope">
        <kv label="名称">
          <el-input v-model="scope.query.name"></el-input>
        </kv>
      </template>
    </my-list>


  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2021-04-11 23:42:19
 */
import dbTables from "@/view/dev/db-connection/db-tables.vue";

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  table1: "",
  table_url: "",
  db_dlg: false,
  db: {style: "JPA", tables: []},
  DatabaseEnum: jv.enum.SqlDatabaseEnum.getData(),
});


const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const setTable1 = (row) => {
  if ($data.table1 && $data.table1 == row.id) {
    $data.table1 = ''
  } else {
    $data.table1 = row.id
  }
}
const preload = function (param) {
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function (res) {
  res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
    jv.enum.SqlDatabaseEnum.fillRes(it, "type");
  });
};
const loadData = function (pageNumber) {
  list.value.loadData(pageNumber);
};
const add_click = function () {
  jv.$router.push("/dev/db-connection/add")
};

const diff_click = function (table2) {
  jv.openTabPage("/dev/db-tables-diff?table1=" + $data.table1 + "&table2=" + table2);
}


const to_crud_click = function (row) {
  var rowId = row.id;
};
const db_click = function (row) {
  var rowId = row.id;
  jv.$router.push("/dev/db-tables/" + rowId)
  list.value.setLastRow(row);
};
const conn_click = function () {
  jv.$saveData("query", $data.query)
};
const edit_click = function (row) {
//记录上次点击行
  var rowId = row.id;
  list.value.setLastRow(row);
  jv.$router.push("/dev/db-connection/edit/" + rowId)
};
const delete_click = function (row) {
  var rowId = row.id;
  var rowName = row.name;
  jv.confirm('确认删除 ' + rowName + ' 吗？').then(res => {
    jv.$http.post("/dev/db-connection/delete/" + rowId).then(res => {
//[axios拦截器中已处理了异常]。
      loadData();
    })
  });
};


</script>